<script setup lang="ts">
const props = defineProps(["color", "score", "name", "tap"]);
const emits = defineEmits(["click"]);

const { score, color, tap } = props;
</script>

<template>
  <div :class="{ option: tap }" @click="emits('click', props)">
    <div class="ball" :style="{ backgroundColor: color }">{{ score }}</div>
    <div v-if="tap">{{ name }}</div>
  </div>
</template>

<style lang="scss" scoped>
@mixin card {
}

.option {
  padding: 1.8vh;
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 10px;
}

.ball {
  height: 5vh;
  width: 5vh;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

span {
  font-size: 1vh;
}
</style>
